<!DOCTYPE html>
<html lang="en">
<head>
<base href=""/>
  <meta charset="UTF-8">
  <title>费用结算</title>
  <link type="text/css" rel="stylesheet" href="../static/css/bootstrap.min.css"/>
  <link type="text/css" rel="stylesheet" href="../static/css/bootstrap-responsive.min.css"/>
  <link type="text/css" rel="stylesheet" href="../static/css/bootstrap-datetimepicker.min.css"/>
  <link type="text/css" rel="stylesheet" href="../static/css/common.css"/>
  
  <script type='text/javascript' src='../static/js/jquery-1.10.2.min.js'></script>
  <script type='text/javascript' src="../static/js/jquery.tips.js"></script>
  <script type='text/javascript' src='../static/js/bootstrap.min.js'></script>
  <script type='text/javascript' src='../static/js/bootstrap-datetimepicker.js'></script>
  <script type='text/javascript' src='../static/js/bootstrap-datetimepicker.zh-CN.js'></script>
  <script type="text/javascript" src="../static/js/common.js"></script>
  <script type="text/javascript" src="../static/js/messageContent.js"></script>
  <script type='text/javascript' src='../static/js/echarts.js'></script>
  <script type='text/javascript' src='../static/js/balance/costBalance.js'></script>
  <script type='text/javascript' src='../static/table/costBalanceTable.js'></script>
</head>
<body>
  <div class="top">
  <h4 class="partTitle"><strong>费用结算</strong></h4>
 </div>
  <div class="blue"></div>
  <div class="scrollBody">
	  <div class="partWhite paddingBottomTen" id="scrollHeight">
		<div class="partTable">
			<div class="col-sm-1 control-label partConditionTitle">
				<span id="showYear" style="font-size:25px;"></span>
		    </div>
			<div class="col-sm-11" id="monthList">
			</div>
		</div>
	  </div>
	  <div class="partWhite paddingBottomTen">
		<form class="form-horizontal" id="costBalanceSearch">
		  <input id="balanceMonth" name="balanceMonth" hidden="hidden">
		  <input id="ChargingUnitPrice" name="ChargingUnitPrice" hidden="hidden">
		  <input id="subBranchCompanyIDSubmit" name="SubBranchCompanyID" hidden="hidden">
		  <input id="lineIDSubmit" name="LineID" hidden="hidden">
		  <div class="form-group">
			<label for="ChargingPriceType" class="col-sm-1 control-label partConditionTitle">电价类型</label>
	        <div class="col-sm-2 partCondition">
	          <select name="ChargingPriceType" id="ChargingPriceType" class="form-control" onchange='getChargingPriceName(this.options[this.options.selectedIndex].value)'>
	          	<option value="1" selected="selected">固定电价</option>
	            <!-- <option value="2">平谷电价</option> -->
	          </select>
	        </div>
	        <label for="EffectiveDate" class="col-sm-1 control-label partConditionTitle">有效日期</label>
	        <div class="col-sm-2 partCondition">
	          <select name="EffectiveDate" id="EffectiveDate" class="form-control" onchange='getChargingPrice(this.options[this.options.selectedIndex].value)'>
	          	<!-- <option value='' selected="selected">请选择</option> -->
	          </select>
	        </div>
	        <label id="ChargingPrice" class="col-sm-5 control-label partConditionTitle" style="text-align:left;color:brown;"></label>
		  </div>
		  <div class="form-group">
			<label for="BalanceBillID" class="col-sm-1 control-label partConditionTitle">电力结算单</label>
	        <div class="col-sm-2 partCondition">
	          <select name="BalanceBillID" id="BalanceBillID" class="form-control" onchange='getBalanceBill(this.options.selectedIndex)'>
	          	<option value="" selected="selected">请选择</option>
	          </select>
	        </div>
            <label id="billErrorMessage" class="control-label" style="color:red;" hidden='hidden'></label>
	        <div id="BalanceRatio">
	          <label for="BalanceRatioType" class="col-sm-1 control-label partConditionTitle">系数类型</label>
	          <div class="col-sm-2 partCondition">
	            <select name="BalanceRatioType" id="BalanceRatioType" class="form-control" onchange='getBalanceRatioType(this.options[this.options.selectedIndex].value)'>
	              <!-- <option value="1">固定贸易系数</option>
	              <option value="2">总贸易系数</option> -->
	              <option value="3" selected="selected">单站贸易系数</option>
	            </select>
	          </div>
	          <label id="CostRatioName" class="col-sm-6 control-label partConditionTitle" style="text-align:left;color:brown;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;"></label>
	        </div>
		  </div>
		</form>
	  </div>
	  <div class="partWhite paddingBottomTen">
		<div class="partTable">
	    	<ul class="nav nav-tabs" role="tablist" id="myTab">
		        <li role="presentation" class="active" onclick="allClick('summaryBalance')"><a href="#summaryBalance" role="tab" data-toggle="tab">汇总结算</a></li>
		        <li role="presentation" onclick="allClick('subBranchCompanyBalance')"><a href="#subBranchCompanyBalance" role="tab" data-toggle="tab">分公司结算</a></li>
		        <li role="presentation" onclick="allClick('lineBalance')"><a href="#lineBalance" role="tab" data-toggle="tab">线路结算</a></li>
	    	</ul>
	    </div>
	    <div class="tab-content">
	        <div role="tabpanel" class="tab-pane active" id="summaryBalance">
				<div class="partTable" style="margin-top: 30px;">
					<div id="summaryHistogram" class="col-sm-12" style="height:300px;" hidden="hidden">
					</div>
					<label class="col-sm-1 control-label partConditionTitle">总充电次数:</label>
			    	<label class="col-sm-1 control-label partConditionTitle" id="totalChargingCount" style="font-size: 20px">0</label>
					<label class="col-sm-1 control-label partConditionTitle">总贸易电量:</label>
			    	<label class="col-sm-1 control-label partConditionTitle" id="totalTradeKWH" style="font-size: 20px">0</label>
					<label class="col-sm-1 control-label partConditionTitle">总充电电量:</label>
			    	<label class="col-sm-1 control-label partConditionTitle" id="totalChargingKWH" style="font-size: 20px">0</label>
			    	<label class="col-sm-1 control-label partConditionTitle">总费用:</label>
			    	<label class="col-sm-1 control-label partConditionTitle" id="totalChargingCost" style="font-size: 20px">0.00</label>
				</div>
	        	<div class="form-group">
					<h4 class="partTitle"><strong>汇总结算详细</strong></h4>
					<button type="button" class="btn btnDefault marginLeft2ten" onclick="exportFile(1)" style="float:right;margin-top: -48px;margin-right: 47px;">
					<img src="../static/images/daochu.png" height="18" width="18"/> 导出</button>
				</div>
				<div class="partTable">
		        	<table class="table table-hover" id="summaryBalanceTable">
		        		<thead id="summaryBalanceThead">
						</thead>
						<tbody id="summaryBalanceTbody">
						</tbody>
		        	</table>
		        	<table class="table scrollTable" id="summaryBalanceTable1" hidden="hidden">
	   				</table>
		        </div>
	        </div>
	        <div role="tabpanel" class="tab-pane" id="subBranchCompanyBalance">
	        	<div class="form-group form-horizontal">
		            <label for="subBranchCompanyID" class="col-sm-1 control-label partConditionTitle" style="text-align:left">运营分公司</label>
		            <div class="col-md-2 partCondition">
		                <select id="subBranchCompanyName" name="SubBranchCompanyID" class="form-control" onchange="search();">
		                    <option value='' selected="selected">请选择</option>
		                </select>
		            </div>
				</div>
				<br>
				<div class="partTable" style="margin-top: 40px;">
					<div id="subBranchCompanyHistogram" class="col-sm-12" style="height:300px;" hidden="hidden">
					</div>
					<label class="col-sm-1 control-label partConditionTitle">充电站数:</label>
			    	<label class="col-sm-1 control-label partConditionTitle" id="sbcStationCount" style="font-size: 20px">0</label>
					<label class="col-sm-1 control-label partConditionTitle">线路数:</label>
			    	<label class="col-sm-1 control-label partConditionTitle" id="sbcLineCount" style="font-size: 20px">0</label>
					<label class="col-sm-1 control-label partConditionTitle">总充电次数:</label>
			    	<label class="col-sm-1 control-label partConditionTitle" id="sbcChargingCount" style="font-size: 20px">0</label>
					<label class="col-sm-1 control-label partConditionTitle">总电量:</label>
			    	<label class="col-sm-1 control-label partConditionTitle" id="sbcChargingKWH" style="font-size: 20px">0</label>
			    	<label class="col-sm-1 control-label partConditionTitle">总费用:</label>
			    	<label class="col-sm-1 control-label partConditionTitle" id="sbcChargingCost" style="font-size: 20px">0.00</label>
				</div>
	        	<div class="form-group">
					<h4 class="partTitle"><strong>分公司结算详细</strong></h4>
					<button type="button" class="btn btn-primary" onclick="exportFile(2)" style="float:right;margin-top: -48px;margin-right: 47px;">
					<img src="../static/images/daochu.png" height="16" width="16"/> 导出</button>
				</div>
				<div class="partTable">
					<table class="table table-hover" id="subBranchCompanyBalanceTable">
						<thead id="subBranchCompanyBalanceThead">
						</thead>
						<tbody id="subBranchCompanyBalanceTbody">
						</tbody>
					</table>
					<table class="table scrollTable" id="subBranchCompanyBalanceTable1" hidden="hidden">
	   				</table>
				</div>
			</div>
	        <div role="tabpanel" class="tab-pane" id="lineBalance">
				<div class="form-group form-horizontal">
					<label for="SubBranchCompanyID" class="col-sm-1 control-label partConditionTitle" style="text-align:left">运营分公司</label>
					<div class="col-md-2 partCondition">
						<select id="SubBranchCompanyID" name="SubBranchCompanyID" class="form-control" onchange='changeCarTeam()'>
							<option value='' selected="selected">请选择</option>
						</select>
					</div>
			        <div id="changeTeam" hidden="hidden">
			            <label for="TeamID" class="col-sm-1 control-label partConditionTitle">车队</label>
			            <div class="col-md-2 partCondition">
			                <select id="TeamID" name="TeamID" class="form-control" onchange='changeLine()'>
			                    <option value='' selected="selected">请选择</option>
			                </select>
			            </div>
			        </div>
			        <div id="changeLine" hidden="hidden">
						<label for="LineID" class="col-sm-1 control-label partConditionTitle">所属线路</label>
						<div class="col-sm-2 partCondition">
							<select id="LineID" name="LineID" class="form-control" onchange="search();">
								<option value="" selected="selected">请选择</option>
							</select>
						</div>
			        </div>
				</div>
				<br>
				<div class="partTable" style="margin-top: 40px;">
					<!-- <div id="histogram" class="col-sm-10" style="height:300px;">
					</div> -->
					<!-- <label class="col-sm-1 control-label partConditionTitle">总车辆数:</label>
			    	<label class="col-sm-1 control-label partConditionTitle" id="lineCarCount" style="font-size: 20px">0</label> -->
					<label class="col-sm-1 control-label partConditionTitle">总充电次数:</label>
			    	<label class="col-sm-1 control-label partConditionTitle" id="lineChargingCount" style="font-size: 20px">0</label>
					<label class="col-sm-1 control-label partConditionTitle">总电量:</label>
			    	<label class="col-sm-1 control-label partConditionTitle" id="lineChargingKWH" style="font-size: 20px">0</label>
			    	<label class="col-sm-1 control-label partConditionTitle">总费用:</label>
			    	<label class="col-sm-1 control-label partConditionTitle" id="lineChargingCost" style="font-size: 20px">0.00</label>
				</div>
	        	<div class="form-group">
					<h4 class="partTitle"><strong>线路结算详细</strong></h4>
					<button type="button" class="btn btn-primary" onclick="exportFile(3)" style="float:right;margin-top: -48px;margin-right: 47px;">
					<img src="../static/images/daochu.png" height="16" width="16"/> 导出</button>
				</div>
				<div class="partTable">
		        	<table class="table table-hover" id="lineBalanceTable">
		        		<thead id="lineBalanceThead">
						</thead>
						<tbody id="lineBalanceTbody">
						</tbody>
		        	</table>
		        	<table class="table scrollTable" id="lineBalanceTable1" hidden="hidden">
	   				</table>
	        	</div>
	        </div>
	    </div>
	  </div>
  </div>
</body>
</html>
